:root {
  --m-popup-background-color: #ffffff;
  --m-popup-header-color: #000000;
  --m-popup-header-font-size: 18px;
  --m-popup-header-font-weight: 500;
  --m-popup-header-padding-top: 20px;
  --m-popup-header-padding-bottom: 16px;
  --m-popup-header-background-color: #F1F8FF;
  --m-popup-content-min-height: 168px;
  --m-popup-content-max-height: 480px;
  --m-popup-content-padding: 0 16px;
  --m-popup-footer-padding: 16px;
  --m-popup-footer-btn-radius: 21px;
  --m-popup-footer-btn-border: 1px solid #9b9b9b;
  --m-popup-footer-btn-font-size: 16px;
  --m-popup-footer-btn-font-weight: 500;
  --m-popup-footer-btn-line-height: 22px;
  --m-popup-footer-btn-height: 42px;
  --m-popup-footer-btn-confirm-background: var(--van-primary-color);
  --m-popup-footer-btn-confirm-color: #ffffff;
  --m-popup-footer-btn-cancel-color: #9B9B9B;
}

.m-popup {
  position: relative;
  background-color: var(--m-popup-background-color);

  &-header {
    background: var(--m-popup-header-background-color);
    font-weight: var(--m-popup-header-font-weight);
    font-size: var(--m-popup-header-font-size);
    color: var(--m-popup-header-color);
    line-height: var(--m-popup-header-font-size);
    padding-top: var(--m-popup-header-padding-top);
    padding-bottom: var(--m-popup-header-padding-bottom);
    display: flex;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    .title {
      flex: 1;
      display: flex;
      justify-content: center;
    }
    .left,.right {
      cursor: pointer;
    }
  }

  &-content {
    position: relative;
    min-height: var(--m-popup-content-min-height);
    max-height: var(--m-popup-content-max-height);
    overflow-y: auto;
    padding: 0 16px;
    padding-top: 10px;
  }

  &-footer {
    display: flex;
    justify-content: space-between;
    padding: var(--m-popup-footer-padding);

    .btn {
      border-radius: var(--m-popup-footer-btn-radius);
      border: var(--m-popup-footer-btn-border);
      font-weight: var(--m-popup-footer-btn-font-weight);
      font-size: var(--m-popup-footer-btn-font-size);
      line-height: var(--m-popup-footer-btn-line-height);
      text-align: left;
      font-style: normal;
      box-sizing: border-box;
      width: 100%;
      height: var(--m-popup-footer-btn-height);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .cancel {
      border: 1px solid var(--m-popup-footer-btn-cancel-color);
      color: var(--m-popup-footer-btn-cancel-color);
      margin-right: 16px;
    }
    .confirm {
      background: var(--m-popup-footer-btn-confirm-background);
      color: var(--m-popup-footer-btn-confirm-color);
    }
  }
}
